// 人物详细信息数据
const characterData = {
    1: {
        name: "张三",
        title: "技术总监",
        image: "images/person1.jpg",
        description: "张三是一位经验丰富的技术领导者，拥有超过15年的软件开发经验。他精通多种编程语言和架构设计，曾主导过多个大型项目的成功交付。在他的领导下，团队始终保持高效协作，技术实力不断提升。他坚信技术应该服务于人，致力于创造有价值的产品。"
    },
    2: {
        name: "李四",
        title: "产品经理",
        image: "images/person2.jpg",
        description: "李四是一位充满激情的产品经理，对市场趋势有着敏锐的洞察力。他善于倾听用户需求，将复杂的业务场景转化为简洁易用的产品功能。在他的规划下，产品始终保持着良好的用户体验和市场竞争力。他相信优秀的产品能够改变人们的生活方式。"
    },
    3: {
        name: "王五",
        title: "设计师",
        image: "images/person3.jpg",
        description: "王五是一位才华横溢的UI/UX设计师，拥有独特的审美视角和创新能力。他的设计作品不仅美观大方，更注重用户体验的每一个细节。从色彩搭配到交互流程，他都追求完美，致力于创造既美观又实用的界面设计。他的设计理念是：好的设计应该是无形的，让用户自然地完成操作。"
    },
    4: {
        name: "赵六",
        title: "前端工程师",
        image: "images/person4.jpg",
        description: "赵六是一位技术精湛的前端工程师，对现代Web技术有着深入的理解和实践经验。他精通React、Vue等主流框架，善于解决复杂的前端技术难题。在他的努力下，产品的性能和用户体验都得到了显著提升。他始终关注前沿技术，不断探索更好的开发实践。"
    },
    5: {
        name: "陈七",
        title: "后端工程师",
        image: "images/person5.jpg",
        description: "陈七是一位资深的后端工程师，在系统架构和数据库设计方面有着丰富的经验。他善于构建高可用、高性能的服务端系统，确保产品的稳定运行。他对代码质量要求严格，注重系统的可扩展性和维护性。在他的努力下，系统始终保持着99.9%以上的可用性。"
    }
};

// 获取DOM元素
const modal = document.getElementById('characterModal');
const modalImage = document.getElementById('modalImage');
const modalName = document.getElementById('modalName');
const modalTitle = document.getElementById('modalTitle');
const modalDescription = document.getElementById('modalDescription');
const closeBtn = document.querySelector('.close');

// 为每个角色卡片添加点击事件
const characterCards = document.querySelectorAll('.character-card');
characterCards.forEach(card => {
    card.addEventListener('click', function() {
        const characterId = this.getAttribute('data-character');
        const character = characterData[characterId];
        
        // 填充模态框内容
        modalImage.src = character.image;
        modalName.textContent = character.name;
        modalTitle.textContent = character.title;
        modalDescription.textContent = character.description;
        
        // 显示模态框
        modal.style.display = 'block';
        document.body.style.overflow = 'hidden'; // 防止背景滚动
    });
});

// 关闭模态框
closeBtn.addEventListener('click', closeModal);

// 点击模态框外部关闭
window.addEventListener('click', function(event) {
    if (event.target === modal) {
        closeModal();
    }
});

// ESC键关闭模态框
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape' && modal.style.display === 'block') {
        closeModal();
    }
});

function closeModal() {
    modal.style.display = 'none';
    document.body.style.overflow = 'auto'; // 恢复背景滚动
}

// 添加平滑滚动效果
document.addEventListener('DOMContentLoaded', function() {
    // 为图片添加加载动画
    const images = document.querySelectorAll('.character-card img');
    images.forEach(img => {
        img.addEventListener('load', function() {
            this.style.opacity = '0';
            this.style.transform = 'scale(0.8)';
            setTimeout(() => {
                this.style.transition = 'all 0.5s ease';
                this.style.opacity = '1';
                this.style.transform = 'scale(1)';
            }, 100);
        });
    });

    // 添加卡片出现动画
    const cards = document.querySelectorAll('.character-card');
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(50px)';
        setTimeout(() => {
            card.style.transition = 'all 0.6s ease';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, index * 200);
    });
});

// 添加鼠标悬停音效（可选）
characterCards.forEach(card => {
    card.addEventListener('mouseenter', function() {
        // 这里可以添加音效，如果需要的话
        this.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
    });
});

// 添加触摸设备支持
characterCards.forEach(card => {
    card.addEventListener('touchstart', function() {
        this.style.transform = 'translateY(-5px) scale(1.02)';
    });
    
    card.addEventListener('touchend', function() {
        setTimeout(() => {
            this.style.transform = 'translateY(0) scale(1)';
        }, 100);
    });
});